import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

/**
 * Input输入框组件
 * @element zss-input
 * @slot prefix - 输入框前缀内容
 * @slot suffix - 输入框后缀内容
 */
@customElement('zss-input')
export class ZssInput extends LitElement {
  static styles = css`
    :host {
      display: inline-block;
      position: relative;
      width: 100%;
    }
    
    .input-wrapper {
      display: inline-flex;
      align-items: center;
      width: 100%;
      border: 1px solid var(--zss-border-color);
      border-radius: var(--zss-border-radius-base);
      transition: border-color 0.2s, box-shadow 0.2s;
      background-color: var(--zss-bg-color);
    }
    
    .input-wrapper:hover {
      border-color: var(--zss-border-color-light);
    }
    
    .input-wrapper:focus-within {
      border-color: var(--zss-color-primary);
      box-shadow: 0 0 0 2px var(--zss-color-primary-light-8);
    }
    
    .input-wrapper.disabled {
      background-color: var(--zss-fill-color-light);
      border-color: var(--zss-border-color-light);
      color: var(--zss-text-color-disabled);
      cursor: not-allowed;
    }
    
    .input {
      flex: 1;
      border: none;
      outline: none;
      padding: 8px 12px;
      font-size: var(--zss-font-size-base);
      line-height: 1.5;
      background: transparent;
      color: var(--zss-text-color-regular);
    }
    
    .input::placeholder {
      color: var(--zss-text-color-placeholder);
    }
    
    .input:disabled {
      cursor: not-allowed;
      color: var(--zss-text-color-disabled);
    }
    
    .prefix, .suffix {
      display: flex;
      align-items: center;
      padding: 0 8px;
      color: var(--zss-text-color-placeholder);
    }
    
    :host([size="small"]) .input {
      padding: 6px 10px;
      font-size: var(--zss-font-size-small);
    }
    
    :host([size="large"]) .input {
      padding: 12px 16px;
      font-size: var(--zss-font-size-large);
    }
    
    :host([type="textarea"]) .input-wrapper {
      display: block;
    }
    
    :host([type="textarea"]) .input {
      resize: vertical;
      min-height: 60px;
    }
  `;

  /**
   * 输入框类型
   * @attr type
   */
  @property({ type: String })
  type: 'text' | 'password' | 'textarea' | 'number' = 'text';

  /**
   * 输入框值
   * @attr value
   */
  @property({ type: String })
  value = '';

  /**
   * 占位符文本
   * @attr placeholder
   */
  @property({ type: String })
  placeholder = '';

  /**
   * 是否禁用
   * @attr disabled
   */
  @property({ type: Boolean })
  disabled = false;

  /**
   * 输入框大小
   * @attr size
   */
  @property({ type: String })
  size: 'small' | 'medium' | 'large' = 'medium';

  /**
   * 是否显示清除按钮
   * @attr clearable
   */
  @property({ type: Boolean })
  clearable = false;

  private handleInput(e: Event) {
    const input = e.target as HTMLInputElement;
    this.value = input.value;
    this.dispatchEvent(new CustomEvent('input', { 
      detail: { value: this.value } 
    }));
  }

  private handleChange(e: Event) {
    const input = e.target as HTMLInputElement;
    this.value = input.value;
    this.dispatchEvent(new CustomEvent('change', { 
      detail: { value: this.value } 
    }));
  }

  private clearValue() {
    this.value = '';
    this.dispatchEvent(new CustomEvent('clear'));
  }

  render() {
    const hasPrefix = this.querySelector('[slot="prefix"]');
    const hasSuffix = this.querySelector('[slot="suffix"]') || this.clearable;

    return html`
      <div class="input-wrapper ${this.disabled ? 'disabled' : ''}">
        ${hasPrefix ? html`
          <span class="prefix">
            <slot name="prefix"></slot>
          </span>
        ` : ''}
        
        ${this.type === 'textarea' ? html`
          <textarea
            class="input"
            .value=${this.value}
            .placeholder=${this.placeholder}
            ?disabled=${this.disabled}
            @input=${this.handleInput}
            @change=${this.handleChange}
          ></textarea>
        ` : html`
          <input
            class="input"
            type=${this.type}
            .value=${this.value}
            .placeholder=${this.placeholder}
            ?disabled=${this.disabled}
            @input=${this.handleInput}
            @change=${this.handleChange}
          />
        `}
        
        ${hasSuffix ? html`
          <span class="suffix">
            <slot name="suffix"></slot>
            ${this.clearable && this.value ? html`
              <span @click=${this.clearValue} style="cursor: pointer;">×</span>
            ` : ''}
          </span>
        ` : ''}
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-input': ZssInput;
  }
}